<script setup lang="ts">
import { onMounted, reactive, ref, watch } from "vue";

defineOptions({
  name: "RingChart"
});

//高亮索引
const activeIndex = ref(0);
const list = ref([
  {
    id: 1,
    name: "裤类",
    data: [
      {
        name: "一季度",
        value: 255
      },
      {
        name: "二季度",
        value: 120
      },
      {
        name: "三季度",
        value: 100
      },
      {
        name: "四季度",
        value: 150
      }
    ]
  },
  {
    id: 2,
    name: "鞋类",
    data: [
      {
        name: "一季度",
        value: 200
      },
      {
        name: "二季度",
        value: 90
      },
      {
        name: "三季度",
        value: 150
      },
      {
        name: "四季度",
        value: 190
      }
    ]
  },
  {
    id: 3,
    name: "上衣",
    data: [
      {
        name: "一季度",
        value: 255
      },
      {
        name: "二季度",
        value: 300
      },
      {
        name: "三季度",
        value: 150
      },
      {
        name: "四季度",
        value: 18
      }
    ]
  },
  {
    id: 4,
    name: "帽子",
    data: [
      {
        name: "一季度",
        value: 200
      },
      {
        name: "二季度",
        value: 100
      },
      {
        name: "三季度",
        value: 100
      },
      {
        name: "四季度",
        value: 150
      }
    ]
  }
]);
const config = ref({
  data: [],
  showOriginValue: true,
  lineWidth: 50
});

const initRingChart = () => {
  config.value.data = list.value[activeIndex.value].data;
};

onMounted(() => {
  initRingChart();
});

watch(activeIndex, () => {
  initRingChart();
});
</script>

<template>
  <div class="box">
    <div class="title">
      <span>各大类销量占比</span>
    </div>
    <div class="content">
      <div class="list">
        <div
          v-for="(item, index) in list"
          :key="item.id"
          :class="{ active: activeIndex === index }"
          class="item"
          @click="activeIndex = index"
        >
          <span>{{ item.name }}</span>
        </div>
      </div>
      <div class="chart-wrapper">
        <dv-active-ring-chart :config="config" class="ring-chart" />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.box {
  padding: 20px;

  .title {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
  }

  .content {
    display: flex;

    .list {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding-left: 20px;
      font-size: 14px;

      .item {
        padding: 5px 10px;
        margin: 10px 0;
        cursor: pointer;
        background-color: rgb(255 255 255 / 20%);

        &.active {
          background-color: rgb(255 255 255 / 50%);
        }
      }
    }

    .chart-wrapper {
      flex: 1;
      min-width: 300px;
      max-width: 400px;
      aspect-ratio: 1;

      .ring-chart {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
